<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-18 10:44:34
 * @LastEditTime: 2022-03-17 16:31:36
-->
<template>
	<el-container class="layoutWrap">
		<el-header>
			<WrapHead />
		</el-header>
		<el-container>
			<el-aside :class="{ isMenuCollapse: menuCollapse === 1 }">
			<!-- <el-aside class="isMenuCollapse"> -->
				<WrapNav />
			</el-aside>
			<el-main class="mainBox">
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

<script lang="ts">
	import { defineComponent } from 'vue';
import { mapMutations, mapState } from 'vuex';
import BreadCrumb from './components/breadCrumb.vue';
import WrapHead from './components/wrapHead.vue';
import WrapNav from './components/wrapNav.vue';

	export default defineComponent({
		'name': `Layout`,
		'components': {
			WrapHead,
			WrapNav,
			BreadCrumb
		},
		'computed': {
			...mapState([`menuCollapse`])
		},
		'methods': {
			// ...mapMutations([`SET_MENU_COLLAPSE`]),
			// getTableHeight() {
			// 	if (document.body.clientWidth < 800) {
			// 		this.SET_MENU_COLLAPSE(1);
			// 	} else {
			// 		this.SET_MENU_COLLAPSE(0);
			// 	}
			// }
		},
		mounted() {
			// this.getTableHeight();
			// window.onresize = () => {
			// 	this.getTableHeight();
			// };
		}
	});
</script>

<style lang="scss" scoped>
	.layoutWrap {
		height: 100%;
		// background-color: $body_B;
		background-color: #F4F7FC;
		> .el-header {
			padding: 0;
			height: 82px;
		}
		.el-aside {
			width: 234px;
			overflow: hidden;
		}
		.isMenuCollapse {
			width: 234px;
		}
		.mainBox {
			padding: 20px 0 0 0;
			display: flex;
			flex-direction: column;
			background: #fff;
			border-left: 1px solid #eee;
			// background-color: $body_B;
			// background-color: #FFF;
			> div:nth-child(2) {
				flex: 1;
				// padding: 10px;
			}
		}
	}
	:deep(.el-container) {
		overflow: hidden;
	}
</style>
